<template>
  <div class="employees-container">
    <div class="app-container">
      <page-tools>
        <!-- 插入到left插槽位置 -->
        <template #left>
          <span>总记录数：{{ total }}条</span>
        </template>
        <!-- 插入到right插槽位置 -->
        <template #right>
          <el-button type="warning" size="small">导入excel</el-button>
          <el-button type="danger" size="small">导出excel</el-button>
          <el-button type="primary" size="small" @click.native="dialogVisible=true">新增员工</el-button>
        </template>
      </page-tools>
      <el-card style="margin-top: 10px;">
        <el-table border :data="employees">
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="头像">
            <template v-slot="{row}">
              <img :src="row.staffPhoto" class="avatar" alt="">
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="聘用形式" prop="formOfEmployment">
            <template v-slot="{row}">{{ formOfData(row.formOfEmployment) }}</template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <el-table-column label="入职时间">
            <template v-slot="{row}">{{ formOfDay(row.timeOfEntry) }}</template>
          </el-table-column>
          <el-table-column label="操作" width="280">
            <template v-slot="{row}">
              <el-button type="text" size="small">查看</el-button>
              <el-button type="text" size="small">分配角色</el-button>
              <el-button type="text" size="small" @click.native="delRoles(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            :current-page="q.page"
            :page-sizes="[5, 10, 15, 30]"
            :page-size="q.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="hSizeChange"
            @current-change="hCurrentChange"
          />
        </el-row>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
          <AddorEdit v-if="dialogVisible" @success="hsuccess" @close="hclose" />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
import { delEmployee, getemployeesList } from '@/api/employees'
import employNum from '@/constant/employees.js'
import AddorEdit from './emploDialog.vue'
import dayjs from 'dayjs'
export default {
  components: {
    AddorEdit
  },
  data() {
    return {
      q: {
        page: 1,
        pagesize: 10
      },
      employees: [],
      total: 0,
      dialogVisible: false
    }
  },
  created() {
    this.getEmployees()
  },
  methods: {
    formOfDay(date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm')
    },
    hsuccess() {
      this.dialogVisible = false
      this.getEmployees()
    },
    hclose() {
      this.dialogVisible = false
    },
    // 删除功能
    delRoles(id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        try {
          const res = await delEmployee(id)
          // console.log(res)
          this.$message.success(res.message)
          // 处理删除异常
          if (this.employees.length === 1 && this.q.page > 1) {
            this.q.page--
          }
          this.getEmployees()
        } catch (e) {
          this.$message.error(e.message)
        }
      }).catch(() => {

      })
    },
    // 每页条数
    hSizeChange(pagesize) {
      this.q.pagesize = pagesize
      this.getEmployees()
    },
    // 页码
    hCurrentChange(page) {
      this.q.page = page
      this.getEmployees()
    },
    // 枚举聘用形式
    formOfData(code) {
      const item = employNum.hireType.find(item => item.id === code)
      if (item) {
        return item.value
      } else {
        return '未知'
      }
    },
    async getEmployees() {
      // 渲染页面
      const res = await getemployeesList(this.q)
      console.log(res)
      this.employees = res.data.rows
      // 显示总条数
      this.total = res.data.total
    }
  }
}
</script>
<style lang="scss" scoped>
.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
</style>
